<template>
    <div>
   <!-- 商品 楼梯 推荐项目 -->
    <section class="floor-list">
      <div class="floor-wrap" v-for="proItem in floorList" :key="proItem.headUrl">
        <img :src="proItem.headUrl" class="floor-head" />
        <div class="floor-content">
          <div class="floor-category" v-for="item in proItem.list" :key="item.title" >
            <p>{{ item.title }}</p>
            <p>{{ item.desc }}</p>
            <div class="floor-products">
              <img v-for="(imgs, index) in item.products" :key="index" :src="imgs.imgUrl"/>
            </div>
          </div>
        </div>
      </div>
    </section>
    </div>
</template>

<script>
// 获取 导入楼梯购物数据 网络请求
import {getFloorList} from '../../../api'
    export default {
        data(){
            return{
                floorList:[]
            }
        },
        created(){
            this.getHomeFloorData();
        },
        methods:{
            //获取楼梯导航数据
            getHomeFloorData(){
                getFloorList((res)=>{
                    this.floorList = res.data;
                    console.log(this.floorList);
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
@import './css/gouwu.scss';
</style>